<template>
  <div>
    <el-dialog
      width="50%"
      title="补货详情"
      :visible.sync="innerVisible"
    >
      <!-- 新增的表格 -->
      <el-table
        v-if="type==='add'"
        :data="tableData"
        style="width: 100%"
        max-height="300"
        :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
      >
        <el-table-column prop="channelCode" label="货道编号" width="100" />
        <el-table-column prop="sku.skuName" label="商品名称" width="130" />
        <el-table-column prop="currentCapacity" label="当前数量" width="100" />
        <el-table-column prop="maxCapacity" label="还可添加" width="100" />
        <el-table-column label="补满数量" width="160">
          <template>
            <!-- <span>{{ scope.row.date }}</span> -->
            <el-input-number
              v-model="num"
              controls-position="right"
              :min="1"
              :max="10"
              style="width: 140px"
              @change="handleChange"
            />
          </template>
        </el-table-column>
      </el-table>

      <!-- 查看详情中的表格 -->
      <el-table
        v-else
        :data="goodsData"
        style="width: 100%"
        max-height="300"
        :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
      >
        <el-table-column prop="channelCode" label="货道编号" width="190" />
        <el-table-column prop="skuName" label="商品" width="200" />
        <el-table-column prop="expectCapacity" label="补货数量" width="200" />
      </el-table>

    </el-dialog>
  </div>
</template>

<script>
import { getGoodsList, getGoodsDetail } from '@/api/lmoperation'

export default {
  name: 'GoodsList',
  components: {

  },
  props: {
    type: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      innerVisible: false,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      goodsData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }],
      num: 10
    }
  },
  created() {
    // this.getGoodsList()
  },
  methods: {
    // 弹窗显示  新增
    async openDialog(innerCode) {
      // console.log(innerCode)
      // 获取商品列表  根据设备编号
      const data = await getGoodsList(innerCode)
      console.log(data)
      this.tableData = data
      this.innerVisible = true
    },
    // 弹窗显示  查看详情
    async showDialog(id) {
      const data = await getGoodsDetail(id)
      this.goodsData = data
      // console.log(data)
      this.innerVisible = true
    },
    // 弹窗关闭
    offDialog() {
      this.innerVisible = false
    },
    // 当值改变的时候，会打印
    handleChange(value) {
      // console.log(value)
    }

  }
}
</script>

<style scoped lang='scss'>
.footer{
  padding-right: 36%;
}
</style>
